<template>
  <div class="v-contain-element-wrap">
    <div class="v-contain-element-container">
      <ModelTreeSelect
        :diagramCustomizationManagementModel="diagramCustomizationManagementModel"
        :treeSelectModel="treeSelectModel"
        @nodeDbClick="addSelectedNodeToRight"
      ></ModelTreeSelect>
      <div class="operate-area">
        <el-button
          :icon="Plus"
          :disabled="treeSelectModel.disableSelected"
          @click="addSelectedNodeToRight()"
        ></el-button>
      </div>
      <ElementList
        :containElementModel="containElementModel"
        :treeSelectModel="treeSelectModel"
      ></ElementList>
    </div>
    <!--     <div class="btn-footor">
      <el-button size="default" @click="openOtherDiagramConfiguration">应用其他视图配置</el-button>
    </div>
    <div>
      <m-modal
        :visible="modalVisivle"
        mask
        resizable
        title="视图选择"
        :showFooter="true"
        cancelText="取 消"
        okText="确 定"
        :width="800"
        :height="600"
        class="v-all-diagram-modal"
        @ok="handleOkModal"
        @cancel="handleCancelModal"
      >
        <div style="width:100%;height:100%" class="g-pd-16">

        </div>

      </m-modal>
    </div> -->
  </div>
</template>

<script lang="ts" setup>
import ModelTreeSelect from "./common/ModelTreeSelect.vue";
import ElementList from "./containElementComps/ElementList.vue";
import { reactive } from "vue";
import { DiagramCustomizationManagementModel } from "../DiagramCustomizationManagementModel";
import { ContainElementModel } from "./containElementComps/ContainElementModel";
import { Plus } from "@element-plus/icons";
import { TreeSelectModel } from "./common/TreeSelectModel";

// const modalVisivle = ref(false);
const props = defineProps<{
  diagramCustomizationManagementModel: DiagramCustomizationManagementModel;
}>();
const containElementModel: ContainElementModel = reactive(props.diagramCustomizationManagementModel.containElementModel);

const treeSelectModel = reactive(new TreeSelectModel(props.diagramCustomizationManagementModel, "containElement"));
treeSelectModel.initData();

const addSelectedNodeToRight = () => {
  if (!treeSelectModel.disableSelected && treeSelectModel.selectedNode) {
    const selectedNode = {
      ...treeSelectModel.selectedNode,
      ...treeSelectModel.selectedNode.data
    };
    containElementModel.elementRange.push(selectedNode);
    // containElementModel.containElementConfig.rightSelectedIds.push(treeSelectModel.selectedNode.id as string);
    treeSelectModel.selectedNode.disabled = true;
  }
};

/* const handleOkModal = () => {
  modalVisivle.value = false;
};
const handleCancelModal = () => {
  modalVisivle.value = false;
};
const openOtherDiagramConfiguration = () => {
  modalVisivle.value = true;
}; */
</script>
<style lang="scss">
.v-contain-element-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px;
  .v-contain-element-container {
    flex: 1;
    display: flex;
    overflow: hidden;

    .operate-area {
      width: 130px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-top: 1px solid #e4e4e4;
      border-bottom: 1px solid #e4e4e4;
      border-right: 1px solid #e4e4e4;
      button {
        margin: 0;
        width: 64px;
        height: 28px;
        border-radius: 0;
        margin-bottom: 16px;
      }
    }
  }
  .btn-footor {
    height: 60px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 16px;
  }
}
</style>
